<div class="content-section implementation">
<fieldset>calendar
  <div class="ui-g">
      <div class="ui-g-12 ui-md-4">
          <h3>日期</h3>
          <p-calendar [(ngModel)]="date1"></p-calendar> {{date1|date}}
      </div>
      <div class="ui-g-12 ui-md-4">
          <h3>日历</h3>
          <p-calendar [(ngModel)]="date1" [locale]="es" dateFormat="dd/mm/yy"></p-calendar> {{date2|date}}
      </div>
      <div class="ui-g-12 ui-md-4">
          <h3>生日</h3>
          <p-calendar [(ngModel)]="date1" [showIcon]="true"></p-calendar> <span style="margin-left:35px">{{date3|date}}</span>
      </div>
      <div class="ui-g-12 ui-md-4">
          <h3>Min-Max</h3>
          <p-calendar [(ngModel)]="date1" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar> {{date4|date}}
      </div>
      <div class="ui-g-12 ui-md-4">
          <h3>特殊日</h3>
          <p-calendar [(ngModel)]="date1" tabindex="0" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="readonlyInput"></p-calendar> {{date5|date}}
      </div>
      <div class="ui-g-12 ui-md-4">
          <h3>纪念日</h3>
          <p-calendar [(ngModel)]="date1" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar> {{date6|date}}
      </div>
      <div class="ui-g-12 ui-md-4">
          <h3>具体年月时间</h3>
          <p-calendar [(ngModel)]="date1" [showTime]="true"></p-calendar> {{date7}}
      </div>
      <div class="ui-g-12 ui-md-4">
          <h3>时间 </h3>
          <p-calendar [(ngModel)]="date1" [timeOnly]="true"></p-calendar>
      </div>
  </div>
  <h3>Inline {{date8|date}}</h3>
  <p-calendar [(ngModel)]="date1" [inline]="true"></p-calendar>
</fieldset>

<fieldset>slider
  <h3 class="first">滑块{{val71}}</h3>
  <p-slider class="slider" [(ngModel)]="slider1" carousel  [style]="{'width':'200px','height':'12px'}"></p-slider>
  <h3>可输入具体值的滑块: {{slider2}}</h3>
  <input type="text" pInputText [(ngModel)]="slider2" />
  <p-slider class="slider" [(ngModel)]="slider2"  [style]="{'width':'200px','height':'12px','margin-top':'10px'}"></p-slider>
  <h3>基础滑块: {{slider1}}</h3>
  <p-slider class="slider" [(ngModel)]="slider1" [animate]="true"  [style]="{'width':'200px','height':'12px'}"></p-slider>
  <h3>Step: {{val4}}</h3>
  <p-slider class="slider" [(ngModel)]="val4" [style]="{'width':'200px','height':'12px'}" [step]="10"></p-slider>
  <h3>两端课调整滑块: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h3>
  <p-slider class="slider" [(ngModel)]="rangeValues"  [range]="true"  [style]="{'width':'200px','height':'12px'}"></p-slider>
  <h3>竖着的滑块: {{val75}}</h3>
  <p-slider class="slider" [(ngModel)]="slider1"  orientation="vertical"></p-slider>
</fieldset>

<fieldset>selectbutton
  <h3 class="first">切换</h3>
  <p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>
  <p>选中: {{selectedType}}</p>
  <h3>复选</h3>
  <p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
  <p>选中: <span *ngFor="let type of selectedTypes">{{type}} </span></p>
  <button type="button" (click)="clear()" pButton icon="fa-close" label="清空" ></button>
</fieldset>

<fieldset>autocomplete
  <h3 class="first">输入地区</h3>
  <p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
      placeholder="Countries" [minLength]="1"></p-autoComplete>
  <span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span>
  <h3>选择特产</h3>
  <p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
      [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" (onDropdownClick)="handleDropdownClick($event)">
      <ng-template let-brand pTemplate="item">
          <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
              <img src="app/resources/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
              <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
          </div>
      </ng-template>
  </p-autoComplete>
  <span style="margin-left:50px">Brand: {{brand||'none'}}</span>
  <h3>输入地区</h3>
  <p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
      [minLength]="1" placeholder="Countries" field="name" [multiple]="true">
  </p-autoComplete>
  <ul>
      <li *ngFor="let c of countries">{{c.name}}</li>
  </ul>
</fieldset>

<fieldset>listbox
  <h3 class="first">点选城市</h3>
  <p-listbox [options]="cities" [(ngModel)]="selectedCity"></p-listbox>
  <p>选中城市: {{selectedCity}}</p>
  <h3>Advanced (Multiple, Checkbox and Filter)</h3>
  <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter"></p-listbox>
  <p>选中城市: <span *ngFor="let c of selectedCities" style="margin-right: 10px">{{c}}</span></p>
  <h3>Content</h3>
  <p-listbox [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'190px','max-height':'250px'}">
      <ng-template let-car pTemplate="item">
          <div class="ui-helper-clearfix">
              <img src="app/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:5px 0 0 5px" width="48">
              <span style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</span>
          </div>
      </ng-template>
  </p-listbox>
  <p>选择特产: {{selectedCar}}</p>
  <button type="button" (click)="selectedCar=null" pButton icon="fa-close" label="Clear Selected Car" ></button>
</fieldset>

<fieldset>dropdown
  <h3 class="first">选择省份</h3>
  <p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="选择省份"></p-dropdown>
  <!--<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>-->
  <h3>编辑特产</h3>
  <p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" editable="editable" placeholder="Select a Brand"></p-dropdown>
  <p>选中特产: {{selectedCar||'none'}}</p>
  <h3>可选择编辑特产</h3>
  <p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="filter">
      <ng-template let-car pTemplate="item">
          <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
              <img src="app/resources/demo/images/car/{{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:5px"/>
              <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
          </div>
      </ng-template>
  </p-dropdown>
  <p>选中特产: {{selectedCar2||'none'}}</p>
</fieldset>

<fieldset>multiSelect
  <h3>多选特产（可搜索）</h3>
  <p-multiSelect [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>
  <p>选中特产：{{selectedCars}}</p>
</fieldset>

<fieldset>checkbox
  <h3 class="first">地区</h3>
  <div class="ui-g" style="width:250px;margin-bottom:10px">
      <div class="ui-g-12"><p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities"></p-checkbox></div>
      <div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities"></p-checkbox></div>
      <div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities"></p-checkbox></div>
  </div>
  选中地区: <span *ngFor="let city of selectedCities" style="margin-right:10px">{{city}}</span>
  <h3>选择技能</h3>
  <div class="ui-g" style="width:250px;margin-bottom:10px">
      <div class="ui-g-12"><p-checkbox name="group2" value="Technology" label="Technology" [(ngModel)]="selectedCategories"></p-checkbox></div>
      <div class="ui-g-12"><p-checkbox name="group2" value="Finance" label="Finance" [(ngModel)]="selectedCategories"></p-checkbox></div>
      <div class="ui-g-12"><p-checkbox name="group2" value="Sports" label="Sports" [(ngModel)]="selectedCategories"></p-checkbox></div>
      <div class="ui-g-12"><p-checkbox name="group2" value="Entertainment" label="Entertainment" [(ngModel)]="selectedCategories"></p-checkbox></div>
  </div>
  选中技能: <span *ngFor="let cat of selectedCategories" style="margin-right:10px">{{cat}} </span>
  <h3>Boolean - {{checked}}</h3>
  <p-checkbox [(ngModel)]="checked" binary="true" ></p-checkbox>
</fieldset>

<fieldset>chips
  <h3 class="first">限制输入</h3>
  <p-chips [(ngModel)]="values1" ></p-chips>
  <h3>输入</h3>
  <p-chips [(ngModel)]="values2">
      <ng-template let-item pTemplate="item">
          {{item}} - (active) <i class="fa fa-user" style="margin-right:2em"></i>
      </ng-template>
  </p-chips>
</fieldset>

<fieldset>editor
  <h3 class="first">文字编辑</h3>
  <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor>
  <p>Value: {{text1||'empty'}}</p>
  <button pButton type="button" label="Clear" icon="fa-close" (click)="text1=null"></button>
  <hr style="border-top:0px;border-color:#dde3e6">
  <h3>文字简单编辑</h3>
  <p-editor [(ngModel)]="text2" [style]="{'height':'320px'}">
      <p-header>
          <span class="ql-formats">
              <button class="ql-bold"></button>
              <button class="ql-italic"></button>
              <button class="ql-underline"></button>
          </span>
      </p-header>
  </p-editor>
  <p>Value: {{text2||'empty'}}</p>
  <button pButton type="button" label="Clear" icon="fa-close" (click)="text2=null"></button>
</fieldset>

<fieldset>inputtext
  <h3 class="first">文本输入</h3>
  <input id="in" type="text" size="30" pInputText [(ngModel)]="text">  {{text}}
  <h3>可禁止的文本输入</h3>
  <input id="in" type="text" size="30" pInputText [disabled]="disabled" />
  <button type="button" (click)="toggleDisabled()" pButton label="Toggle"></button>
</fieldset>

<fieldset>inputtextarea
  <h3 class="first">限制高度的文本输入</h3>
  <textarea rows="5" cols="30" pInputTextarea></textarea>
  <h3>随文字增高的文本输入</h3>
  <textarea rows="5" cols="30" pInputTextarea autoResize="autoResize"></textarea>
</fieldset>

<fieldset>mask
  <div class="ui-g ui-fluid">
      <div class="ui-g-12 ui-md-6 ui-lg-4">
          <span>电话</span>
          <p-inputMask mask="99-999999" [(ngModel)]="mask1" placeholder="99-999999"></p-inputMask>
      </div>
      <div class="ui-g-12 ui-md-6 ui-lg-4">
          <span>手机号</span>
          <p-inputMask mask="999-9999-9999" [(ngModel)]="mask1" placeholder="999-9999-9999"></p-inputMask>
      </div>
      <div class="ui-g-12 ui-md-6 ui-lg-4">
          <span>日期</span>
          <p-inputMask mask="99/99/9999" [(ngModel)]="mask1" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
      </div>
      <div class="ui-g-12 ui-md-6 ui-lg-4">
          <span>座机</span>
          <p-inputMask mask="(999) 999-9999" [(ngModel)]="mask1" placeholder="(999) 999-9999"></p-inputMask>
      </div>
      <div class="ui-g-12 ui-md-6 ui-lg-4">
          <span>Phone Ext</span>
          <p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="mask1" placeholder="(999) 999-9999? x99999"></p-inputMask>
      </div>
      <div class="ui-g-12 ui-md-6 ui-lg-4">
          <span>Serial Number</span>
          <p-inputMask mask="a*-999-a999" [(ngModel)]="mask1" placeholder="a*-999-a999"></p-inputMask>
      </div>
  </div>
</fieldset>

<fieldset>spinner
  <h3 class="first">自增（减）1</h3>
  <p-spinner size="30" [(ngModel)]="spinner1"></p-spinner>
  <h3>自增自然数</h3>
  <p-spinner size="30" [(ngModel)]="spinner2" [min]="0" [max]="100"></p-spinner>
  <h3>自增0.25</h3>
  <p-spinner size="30" [(ngModel)]="spinner3" [step]="0.25"></p-spinner>
  <h3>禁止自增</h3>
  <p-spinner size="30" [(ngModel)]="spinner4" [disabled]="true"></p-spinner>
</fieldset>

<fieldset>togglebutton
  <h3 class="first">判断 - ({{checked1}})</h3>
  <p-toggleButton [(ngModel)]="checked1" [style]="{'width':'150px'}"></p-toggleButton>
  <h3>判断 - ({{checked2}})</h3>
  <p-toggleButton [(ngModel)]="checked2" onLabel="I confirm" offLabel="I reject" onIcon="fa-check-square" offIcon="fa-square" [style]="{'width':'150px'}"></p-toggleButton>
</fieldset>

<fieldset>inputseitch
  <h3 class="first"> 是否 - {{checked3}}</h3>
  <p-inputSwitch offLabel="No" [(ngModel)]="checked3"></p-inputSwitch>
  <h3>是否 - <span> {{checked4}}</span></h3>
  <p-inputSwitch onLabel="Yes"  [(ngModel)]="checked4"></p-inputSwitch>
</fieldset>

<fieldset>radiobutton
  <h3 class="first">单选</h3>
  <div class="ui-g" style="width:250px;margin-bottom:10px">
      <div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1"></p-radioButton></div>
      <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1"></p-radioButton></div>
      <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1"></p-radioButton></div>
  </div>
  Selected Value = {{val1||'none'}}
</fieldset>

<fieldset>password
  <h3 class="first">密码安全等级提示</h3>
  <input pPassword type="password"/>
</fieldset>

<fieldset>tristatecheckbox
  <h3 class="first">Value: {{value}}</h3>
  <p-triStateCheckbox [(ngModel)]="value"></p-triStateCheckbox>
</fieldset>

<fieldset>rating
  <h3 class="first">等级 {{rating}}</h3>
  <p-rating [(ngModel)]="rating"></p-rating>
  <h3>等级评分极展示{{rating}}</h3>
  <p-rating [(ngModel)]="rating" (onRate)="handleRate($event)" ></p-rating> <span *ngIf="msg" style="margin-left:10px">{{msg}}</span>
  <h3>等级评分 {{rating}}</h3>
  <p-rating [(ngModel)]="rating" [cancel]="false"></p-rating>
  <h3>等级展示</h3>
  <p-rating [ngModel]="5" readonly="true" stars="10" [cancel]="false"></p-rating>
  <h3>禁止评分</h3>
  <p-rating [ngModel]="rating2" disabled="true" stars="10"></p-rating>
</fieldset>
</div>
